<template>
  <li @click="toDetail(item)" class="list-template" :class="diff">
    <div class="cover">
      <div class="image">
        <el-image :src="item.img || item.cover500" fit="contain">
          <div slot="placeholder" class="image-slot flex-center flex-column">
            <i class="iconfont el-icon-loading"></i>
            <p>
              {{ $t("public.loading") }}
              <span class="dot">...</span>
            </p>
          </div>
          <div slot="error" class="image-slot flex-center">
            <img src="@/assets/images/defaultCover.png" />
          </div>
        </el-image>
      </div>
      <div class="count" v-show="item.count"></div>
      <div class="foot" v-if="diff == 'sort-box'"></div>
      <div
        class="foot"
        v-else
        :title="
          $i18n.locale === 'zh'
            ? item.catalogueCname || item.catalogueName
            : item.catalogueName
        "
      >
        <p
          class="ellipsis-two"
          v-text="
            $i18n.locale === 'zh'
              ? item.catalogueCname || item.catalogueName
              : item.catalogueName
          "
        ></p>
      </div>
      <div v-show="diff == 'sort-box'" class="describe">
        <p
          v-text="
            $i18n.locale === 'zh'
              ? item.categoryCname || item.categoryName
              : item.categoryName
          "
        ></p>
      </div>
      <div class="info" v-if="item.info">
        <p>{{ item.info }}</p>
      </div>
    </div>
  </li>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  props: {
    item: {
      type: Object,
    },
    diff: {
      type: String,
    },
  },
  components: {},
  computed: {
    isMobile() {
      return this.$store.getters.isMobile;
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 跳转分类
    toDetail(item) {
      if (this.diff === "sort-box") {
        this.$router.push({
          name: item.moduleId == 516 ? "classicalSortList" : "jazzSortList",
          params: { id: item.categoryId },
        });
      } else if (this.diff === "audioBook-box") {
        let params = {
          sort: "audio-book",
          id: item.catalogueId,
        };
        this.$router.push({
          name: this.isMobile ? "mAlbumDetail" : "albumDetail",
          params,
        });
      }
      // this.setArtist(item)
    },
    ...mapMutations({
      // setArtist: 'SET_ARTIST'
    }),
  },
};
</script>

<style lang="scss" scoped>
.list-template {
  .cover {
    position: relative;
    z-index: 2;
    padding-top: 100%;
    border-radius: 2px;
    cursor: pointer;
    .el-image {
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 100%;
        height: auto;
      }
    }
    .foot {
      width: 100%;
      height: 64px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      position: absolute;
      left: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      // justify-content: space-between;
      // padding: 0 10px;
      p {
        color: #ffffff;
      }
    }
    .describe {
      width: 100%;
      padding: 0 10px;
      text-align: center;
      position: absolute;
      font-weight: bold;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      color: #fff;
    }
  }
  &.sort-box {
    .cover {
      .describe {
        top: 85%;
      }
      .foot {
        height: 80px;
        background: rgba(0, 0, 0, 0.7);
        -webkit-filter: blur(2px) brightness(1.5) grayscale(0.2) contrast(0.8);
        -moz-filter: blur(2px) brightness(1.5) grayscale(0.2) contrast(0.8);
        -ms-filter: blur(2px) brightness(1.5) grayscale(0.2) contrast(0.8);
        -o-filter: blur(2px) brightness(1.5) grayscale(0.2) contrast(0.8);
        filter: blur(2px) brightness(1.5) grayscale(0.2) contrast(0.8);
      }
    }
  }
  // &.audioBook-box{
  //   .cover{

  //   }
  // }
}
</style>
